<template>
    <div>
        <router-link
            class="header-abs"
            tag="div"
            to="/"
            v-if="showAbs"
            >
            <span class="iconfont icon-left"></span>
        </router-link>
        <div class="header-fixed"
            v-if="!showAbs"
            :style="OpacityStyle"
            >
            景点详情
            <router-link to="/">
                <span class="iconfont icon-left"></span>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'DetailHeader',
        data () {
            return {
                showAbs: true,
                OpacityStyle: {
                    // 默认透明度为0，即不透明
                    opacity: 0
                }
            }
        },
        methods: {
            handleScroll () {
                // 获取滑动高度
                const top = document.documentElement.scrollTop
                // 判定滑动高度来进行显隐控制
                if (top > 60) {
                    // 实现根据滑动高度来进行渐隐渐显效果
                    const opacity = top / 200
                    this.OpacityStyle = {
                        opacity: opacity
                    }
                    this.showAbs = false
                } else {
                    this.showAbs = true
                }
            }
        },
        activated () {
            // window是全局对象，需要注意全局对象需解绑
            // 监听滚动距离，因为加了keepalive所以页面一旦渲染就执行activated
            window.addEventListener('scroll', this.handleScroll)
        },
        deactivated () {
            // keepalive增加的钩子，页面即将消失的时候触发，适合写全局组件的解绑
            window.removeEventListener('scroll', this.handleScroll)
        }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
    .header-fixed
    // 优先级略低于轮播图的99即可
        z-index: 95
        position: fixed
        top: 0
        left: 0
        right: 0
        height: $headerHeight
        line-height: $headerHeight
        text-align: center
        color: #fff
        background: $bgColor
        font-size: .3rem
        .icon-left
            position: absolute
            top: 0
            left: .2rem
            text-align: center
            font-size: .4rem
            color: #fff
    .header-abs
        position: absolute
        left: .2rem
        top: .2rem
        width: .7rem
        height: .7rem
        line-height: .7rem
        text-align: center
        border-radius: .2rem
        background: rgba(0,0,0,0.5)
        .icon-left
            color: #fff
            font-size: .4rem
</style>
